<template>
  <div class="app-container">
    <div class="content-box">

      <!-- 头部最大图 -->
      <div class="header-img">
        <a-image
          src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530160732/20250530160732_68396744a7c41.webp"
          alt="header" :preview="false" />
      </div>

      <!-- 历史文字说明 -->
      <div class="fashion-box">
        <h4 class="year-desc">Established in 2010, LUNRUO was born with a singular vision: to craft garments with sincerity that transcend borders. In the past 15 years, LUNRUO has been sharing the beauty of nature and cultures in the 15+ cities that she has visited, fueling the brand with endless energy and inspiration.
        </h4>
      </div>

      <!-- 时间图 -->
      <div class="time-img">
        <a-image src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530153206/20250530153206_68395ef6c6ff7.webp" :preview="false"
          alt="image" />
      </div>

      <div class="fashion-box">
        <h4 class="year-desc">At LUNRUO, we hold a belief that travel is the art of living beautifully - a philosophy
          encapsulated in our motto, "Travel more, live more." The iconic "GO" in our logo LUNRUO embodies the essence
          of adventure, urging us to embark on journeys and explore the uncharted.
        </h4>
      </div>
      <!-- 四个独特的系列 -->
      <div class="series-section">
        <h2 class="series-title">Four Unique Series</h2>
        <div class="series-list">
          <div class="series-item" v-for="item in imgList" :key="item.id">
            <img :src="item.url" alt="Luxury" />
            <div class="series-name">{{ item.title }}</div>
            <div class="series-desc">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div class="fashion-box">
        <h4 class="year-desc">With a keen eye for both nature's wonders and cultural treasures, we carefully select only
          the highest-quality materials. This journey of discovery results in a thoughtfully curated collection that
          showcases our unwavering commitment to excellence.
        </h4>
      </div>
      <!-- 面料大图 -->
      <div class="header-img">
        <a-image
          src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530154132/20250530154132_6839612cc462e.webp"
          :preview="false" />
      </div>
      <div class="fabric-sty">
        <div class="fashion-box">
          <h4 class="year-desc">LUNRUO's concept for making garments, which is called Cheng-Fashion aesthetic, is a
            testament of fabrics steeped in sincerity, craftsmanship born of genuine dedication, and pricing that
            reflects
            honesty. We meticulously select premium materials, prioritizing natural and renewable fibers, resulting in
            designs that transcend trends. All this, coupled with pricing marries exceptional quality and value.
            Cheng-Fashion represents a blend of high quality and great value, a principle we cherish as we create
            lasting
            garments for every woman.
          </h4>
        </div>

        <div class="series-section">
          <div class="series-list">
            <div class="series-item" v-for="item in fabricList" :key="item.id">
              <img :src="item.url" alt="Luxury" />
            </div>
          </div>
        </div>

        <div class="fashion-box">
          <h4 class="year-desc">Our approach to fabric treatment is marked by a steadfast commitment to responsibility,
            ensuring a global selection of high-quality materials. Our pursuit of international certification stands as
            a
            testament to our dedication to excellence. This ethos resonates in every thread, weaving a narrative of
            integrity, quality, and conscientiousness.
          </h4>
        </div>
      </div>

      <!-- 面料视频 -->
      <div class="fashion-box">
        <h2 class="series-title">Wholeheartedly Crafting Premium<br>
          Clothing with Responsibility</h2>
        <h4 class="year-desc" style="text-align: center;margin-bottom: 30px;">Selecting fabrics with responsible
          attitude and trusted
          certification. (e.g. WOOLMARK)
        </h4>
        <!-- 视频 -->
        <iframe src="https://www.youtube.com/embed/4cgxZySosyE?start=0&autoplay=1&loop=1&playlist=4cgxZySosyE&mute=0&controls=0&enablejsapi=1" style="width: 1200px;height: 680px;"></iframe>
        <!-- <VideoPlayer videoSrc="https://www.youtube.com/embed/4cgxZySosyE?start=0&autoplay=1&loop=1&playlist=4cgxZySosyE&mute=0&controls=0&enablejsapi=1" :autoplay="true"
          :muted="true" :loop="true" :showControls="false" :showPlayButton="true" /> -->
      </div>

      <!-- 供应链视频 -->
      <div class="fashion-box">
        <h2 class="series-title">From In-House R&D
          <br>
          to Dedicated Supply Chain
        </h2>
        <h4 class="year-desc" style="margin-bottom: 30px;">With 15 years of persistence, we have established a complete
          supply chain from design to
          production, aiming to provide better products, prices and services.
        </h4>
        <!-- 视频 -->
         <iframe src="https://www.youtube.com/embed/0Fa6F7sIBjs?start=0&autoplay=1&loop=1&playlist=0Fa6F7sIBjs&mute=0&controls=0&enablejsapi=1" style="width: 1200px;height: 680px;"></iframe>
        <!-- <VideoPlayer videoSrc="https://www.youtube.com/embed/0Fa6F7sIBjs?start=0&autoplay=1&loop=1&playlist=0Fa6F7sIBjs&mute=0&controls=0&enablejsapi=1" :autoplay="true"
          :muted="true" :loop="true" :showControls="false" :showPlayButton="true" /> -->
        <h4 class="year-desc" style="margin-top: 40px;">Our brand, since its inception, has steadfastly championed
          independent research and
          development.
        </h4>
        <h4 class="year-desc" style="margin: 40px 0;">A robust fully-equipped system prioritizes comfort and process
          refinement from conception.
          With a well-optimized supply chain, we flexibly apply cutting-edge equipment from both domestic and
          international sources in our self-owned factories. Long-standing partnerships with esteemed suppliers also
          ensure meticulous planning and seamless integration, facilitating the swift delivery of high-quality products.
          Our self-owned factories and supply chain stand as a testament to our unwavering commitment to quality.
        </h4>
      </div>
      <!-- 15年的成就 -->
      <div class="our-values">
        <div class="fashion-box">
          <h2 class="series-title1">Our achievements in these 15 years
          </h2>
          <div class="stats-section">
            <div class="stats-container" v-for="item in yearsList" :key="item.id">
              <div class="stat-card">
                <!-- Placeholder for icon, e.g., an <img> or a font icon -->
                <img :src="item.url" style="width: 100%;height: 100%;" alt="Suppliers">
              </div>
            </div>
          </div>
          <iframe src="https://www.youtube.com/embed/yW_0Qks43-I?start=0&autoplay=1&loop=1&playlist=yW_0Qks43-I&mute=0&controls=0&enablejsapi=1" style="width: 1200px;height: 680px;"></iframe>
          <!-- <VideoPlayer videoSrc="https://www.youtube.com/embed/yW_0Qks43-I?start=0&autoplay=1&loop=1&playlist=yW_0Qks43-I&mute=0&controls=0&enablejsapi=1" :autoplay="true"
            :muted="true" :loop="true" :showControls="false" :showPlayButton="true" /> -->
        </div>

      </div>

      <div class="shipping">
        <div class="fashion-box" >
          <h2 class="series-title1" style="font-size: 40px;">LUNRUO Presents<br>Premium Clothing to The World
          </h2>
          <h4 class="year-desc" style="color: #fff;margin-bottom: 300px;">Today, LUNRUO has found its footing on numerous international e-commerce platforms,
            boasting an independent overseas platform at lunruo.com. Our users now span across 220 countries. In the
            future, we will continue to share the beauty of Eastern clothing aesthetics, bringing Chinese culture and
            top-notch quality with sincerity to the world!
          </h4>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import VideoPlayer from '@/components/VideoPlayer.vue';

// 商品具体分类跳转
const goPath = (path: string) => {
  window.location.href = path
}
// 跳转首页
const goHome = () => {
  window.location.href = '/home/clothings.html';
}
const imgList = ref([
  {
    id: '1',
    title: 'LUXURY',
    content: 'Always exquisite, always in style',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161455/20250530161455_683968ffdd0e0.webp'
  },
  {
    id: '2',
    title: 'COLLECTION',
    content: 'Elegant & versatile',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161512/20250530161512_6839691079975.webp'
  },
  {
    id: '3',
    title: 'RELAX',
    content: 'Princess-like & romantic',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161534/20250530161534_68396926d71ea.webp'
  },
  {
    id: '4',
    title: 'JEANS',
    content: 'Chic & on-the-move',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161549/20250530161549_68396935584b2.webp'
  }
])
const fabricList = ref([
  {
    id: '1',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161702/20250530161702_6839697eba5a1.webp'
  },
  {
    id: '2',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161715/20250530161715_6839698ba2b2f.webp'
  },
  {
    id: '3',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161743/20250530161743_683969a764d31.webp'
  },
  {
    id: '4',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530161804/20250530161804_683969bc87c48.webp'
  }
])
const yearsList = ref([
  {
    id: '1',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530154514/20250530154514_6839620ae2fa4.webp'
  },
  // {
  //   id: '2',
  //   url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530155824/20250530155824_6839652027162.webp'
  // },
  {
    id: '3',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530154537/20250530154537_68396221621db.webp'
  },
  {
    id: '4',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250530154606/20250530154606_6839623e1ae15.webp'
  }
])
</script>

<style scoped lang="scss">
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  // padding: 0 30px;
}

.content-box {
  margin: 40px auto;
  width: 100%;
}

.header-img {
  position: relative;
  width: 2000px;
  overflow: hidden;
  margin: 0 auto;

  :deep(.ant-image) {
    width: 100%;

    img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: none !important; /* Ensure no transition */
      transform: none !important; /* Ensure no transform */
    }

    img:hover {
      transform: none !important;
    }
  }
}

.fashion-box {
  width: 1200px;
  padding: 50px 0;
  margin: 0 auto;
  color: #000000;
  text-align: center;
}

.time-img {
  width: 1200px;
  padding: 0;
  margin: 0 auto;

  :deep(.ant-image) {
    width: 100%;

    img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: none !important; /* Ensure no transition */
      transform: none !important; /* Ensure no transform */
    }

    img:hover {
      transform: none !important;
    }
  }
}

.content {
  margin-top: 40px;
  line-height: 1.5;
  font-size: 28px;
  color: #212529;
}

.our-values {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  background-image: url(https://cdn.shopify.com/s/files/1/0617/0099/7296/files/stars.jpg?v=1690178652);
  background-position: center bottom;
  padding-top: 78px;
  padding-bottom: 120px;
  background-size: cover;
}



.shipping {
  background-image: url(https://cdn.shopify.com/s/files/1/0617/0099/7296/files/since_1995_3faa3e4e-ce79-49f6-b6a8-b114985c4dfc.jpg?v=1731056270);
  background-position: center bottom;
  background-size: cover;
  padding-top: 100px;
}

.year-desc {
  color: #835144;
  font-weight: 300;
  line-height: 40px;
  font-size: 18px;
  // margin: 30px 0;
  text-align: left;
  font-weight: 600;
}

.series-section {
  text-align: center;
}

.series-title {
  font-size: 2.5rem;
  color: #7a5230;
  margin-bottom: 40px;
  font-family: 'serif';
  letter-spacing: 1px;
}

.series-title1 {
  font-family: 'serif';
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  font-size: 48px;
  font-weight: 400;
}

.series-list {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.series-item {
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: none !important; /* Ensure no transition */
      transform: none !important; /* Ensure no transform */
    }

    img:hover {
      transform: none !important;
    }
}

.series-item img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 18px;
  transition: transform 0.3s;
}

.series-item img:hover {
  transform: scale(1.03);
}

.series-name {
  font-size: 1.4rem;
  font-weight: bold;
  color: #7a5230;
  margin-bottom: 6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.series-desc {
  font-size: 1rem;
  color: #7a5230;
  opacity: 0.85;
  margin-bottom: 10px;
}

.stats-section {
  // Assuming the starry background is on this section or its parent
  background: url('/path/to/your/starry/background.jpg') no-repeat center center;
  background-size: cover;
  padding: 50px 20px; // Adjust padding as needed
  display: flex;
  justify-content: center;
}

.stats-container {
  display: flex;
  gap: 30px; // Space between cards
  flex-wrap: wrap; // Allow wrapping on smaller screens
  justify-content: center;
  max-width: 1200px; // Max width for the container
  width: 100%;
}

.stat-card {
  background-color: #fff;
  border-radius: 8px; // Rounded corners
  text-align: center;
  flex: 1; // Allow cards to grow and shrink
  min-width: 220px; // Minimum width before wrapping
  max-width: 280px; // Maximum width
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); // Subtle shadow
}


.fabric-sty {
  width: 100%;
  background-color: #fffaf7;
}

/* 媒体查询 */
@media screen and (max-width: 1200px) {
  .content-box {
    margin: 20px auto;
  }

  .header-img {
    width: 100%;
  }

  .fashion-box {
    width: 90%;
    padding: 30px 0;
  }

  .time-img {
    width: 90%;
  }

  .series-list {
    gap: 20px;
  }

  .series-item {
    width: calc(50% - 20px);
  }

  iframe {
    width: 100% !important;
    height: 400px !important;
  }
}

@media screen and (max-width: 768px) {
  .fashion-box {
    padding: 20px 0;
  }

  .year-desc {
    font-size: 16px;
    line-height: 28px;
  }

  .series-title {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  .series-title1 {
    font-size: 32px;
  }

  .series-item {
    width: 100%;
    max-width: 400px;
  }

  .series-name {
    font-size: 1.2rem;
  }

  .series-desc {
    font-size: 0.9rem;
  }

  .stats-container {
    gap: 15px;
  }

  .stat-card {
    min-width: 160px;
  }

  iframe {
    height: 300px !important;
  }
}

@media screen and (max-width: 480px) {
  .content-box {
    margin: 10px auto;
  }

  .fashion-box {
    padding: 15px 0;
  }

  .year-desc {
    font-size: 14px;
    line-height: 24px;
  }

  .series-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .series-title1 {
    font-size: 24px;
  }

  .series-item img {
    height: 280px;
  }

  iframe {
    height: 200px !important;
  }
}
</style>
